<template>
	<div style="position: relative;" class="large-screen">
		<div style="position: absolute;right: 16px;top: 40px;z-index: 1000;">
			<jk-full-screen-button class-name="large-screen"></jk-full-screen-button>
		</div>
		<el-carousel ref="zmd" indicator-position="none" style="height: 100%;" height="calc(100vh - 30px)" :interval="3000" :autoplay="false">
			<el-carousel-item style="height: calc(100% + 30px);">
				<spec
					style="height: 100%;"
					:kill-timer="killTimer"
					from-page="largeScreen"
				></spec>
			</el-carousel-item>
			<el-carousel-item style="height: 100%;">
				<workshopLayout
					:kill-timer="killTimer"
					from-page="largeScreen"
				></workshopLayout>
			</el-carousel-item>
		</el-carousel>
		<!--<component :is="comName"></component>-->
	</div>
</template>
<script>
    import workshopLayout from '../workshopMachineAndEnvironmentMonitor/index';
    import spec from './components/spec/index';
    export default {
        components: {
            spec,
            workshopLayout
        },
        data() {
            return {
                killTimer: null,
                comName: 'spec',
                largeScreenTimer: null
            };
        },
        mounted() {
            this.largeScreenTimer = setInterval(() => {
                this.$refs.zmd.next();
            }, 1000 * 10);
        },
        beforeRouteEnter(to, from, next) {
            next((_this) => {
            });
        },
        beforeRouteLeave(to, from, next) {
            this.killTimer = Math.random();
            clearInterval(this.largeScreenTimer);
            this.$nextTick(() => {
                next();
            });
        }
    };
</script>
